<template>
  <div class="min-h-screen bg-dark-bg text-dark-text">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 z-50 bg-dark-bg/95 backdrop-blur-md border-b border-dark-border">
      <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
        <div class="font-bold text-2xl text-trae-green">
          火之夜工作室
        </div>
        <div class="flex items-center gap-6">
          <router-link 
            to="/"
            class="text-dark-muted hover:text-white transition-colors duration-300"
          >
            返回首页
          </router-link>
        </div>
      </div>
    </nav>

    <!-- 项目详情内容 -->
    <div class="pt-20">
      <div v-if="project" class="max-w-6xl mx-auto px-6 py-12">
        <!-- 项目标题和基本信息 -->
        <div class="text-center mb-12">
          <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
            {{ project.title }}
          </h1>
          <p class="text-xl text-dark-muted max-w-3xl mx-auto mb-8">
            {{ project.description }}
          </p>
          
          <!-- 技术栈 -->
          <div class="flex flex-wrap justify-center gap-3 mb-8">
            <span
              v-for="tech in project.technologies"
              :key="tech"
              class="px-4 py-2 bg-dark-secondary text-trae-green rounded-full text-sm font-medium"
            >
              {{ tech }}
            </span>
          </div>
          
          <!-- 项目信息 -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-2xl mx-auto">
            <div class="text-center">
              <div class="text-2xl font-bold text-trae-green mb-2">{{ project.duration }}</div>
              <div class="text-dark-muted">开发周期</div>
            </div>
            <div class="text-center">
              <div class="text-2xl font-bold text-trae-green mb-2">{{ project.teamSize || '未知' }}</div>
              <div class="text-dark-muted">团队规模</div>
            </div>
            <div class="text-center">
              <div class="text-2xl font-bold text-trae-green mb-2">{{ project.category }}</div>
              <div class="text-dark-muted">项目类型</div>
            </div>
          </div>
        </div>

        <!-- 项目展示内容 -->
        <div class="space-y-12">
          <!-- 轮播图模式 -->
          <div v-if="project.displayMode === 'carousel'" class="space-y-8">
            <!-- 图片轮播 -->
            <div class="relative bg-dark-secondary rounded-2xl overflow-hidden">
              <div class="aspect-video relative">
                <img
                  :src="project.images[currentImageIndex]"
                  :alt="`${project.title} 截图 ${currentImageIndex + 1}`"
                  class="w-full h-full object-cover"
                />
                
                <!-- 轮播控制 -->
                <button
                  v-if="project.images.length > 1"
                  @click="previousImage"
                  class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-3 rounded-full transition-all duration-300"
                >
                  <ChevronLeft class="w-6 h-6" />
                </button>
                <button
                  v-if="project.images.length > 1"
                  @click="nextImage"
                  class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-3 rounded-full transition-all duration-300"
                >
                  <ChevronRight class="w-6 h-6" />
                </button>
                
                <!-- 指示器 -->
                <div v-if="project.images.length > 1" class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
                  <button
                    v-for="(_, index) in project.images"
                    :key="index"
                    @click="currentImageIndex = index"
                    :class="[
                      'w-3 h-3 rounded-full transition-all duration-300',
                      currentImageIndex === index ? 'bg-trae-green' : 'bg-white/30 hover:bg-white/50'
                    ]"
                  ></button>
                </div>
              </div>
            </div>
            
            <!-- 项目详情文案 -->
            <div class="bg-dark-secondary rounded-2xl p-8">
              <h3 class="text-2xl font-bold mb-6 text-trae-green">项目亮点</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div v-for="highlight in project.highlights" :key="highlight" class="flex items-start space-x-3">
                  <div class="w-2 h-2 bg-trae-green rounded-full mt-2 flex-shrink-0"></div>
                  <span class="text-dark-text">{{ highlight }}</span>
                </div>
              </div>
              
              <h3 class="text-2xl font-bold mb-4 text-trae-green">项目详情</h3>
              <p class="text-dark-muted leading-relaxed">{{ project.details }}</p>
            </div>
          </div>

          <!-- 长图模式 -->
          <div v-else class="space-y-8">
            <!-- 垂直图片展示 -->
            <div class="space-y-6">
              <div
                v-for="(image, index) in project.images"
                :key="index"
                class="bg-dark-secondary rounded-2xl overflow-hidden"
              >
                <img
                  :src="image"
                  :alt="`${project.title} 截图 ${index + 1}`"
                  class="w-full h-auto object-cover"
                />
              </div>
            </div>
            
            <!-- 固定底部文案区域 -->
            <div class="bg-dark-secondary rounded-2xl p-8 sticky bottom-6">
              <h3 class="text-2xl font-bold mb-6 text-trae-green">项目亮点</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div v-for="highlight in project.highlights" :key="highlight" class="flex items-start space-x-3">
                  <div class="w-2 h-2 bg-trae-green rounded-full mt-2 flex-shrink-0"></div>
                  <span class="text-dark-text">{{ highlight }}</span>
                </div>
              </div>
              
              <h3 class="text-2xl font-bold mb-4 text-trae-green">项目详情</h3>
              <p class="text-dark-muted leading-relaxed">{{ project.details }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 项目不存在 -->
      <div v-else class="flex items-center justify-center min-h-[60vh]">
        <div class="text-center">
          <h2 class="text-3xl font-bold mb-4 text-dark-muted">项目不存在</h2>
          <p class="text-dark-muted mb-8">您访问的项目可能已被删除或不存在</p>
          <router-link 
            to="/"
            class="btn-primary px-8 py-3 rounded-lg font-semibold transition-all duration-300 hover:scale-105"
          >
            返回首页
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
import { projects } from '@/data/projects'
import type { Project } from '@/data/projects'

const route = useRoute()
const currentImageIndex = ref(0)

const project = computed(() => {
  const projectId = route.params.id as string
  return projects.find(p => p.id === projectId) || null
})

const nextImage = () => {
  if (project.value && project.value.images.length > 1) {
    currentImageIndex.value = (currentImageIndex.value + 1) % project.value.images.length
  }
}

const previousImage = () => {
  if (project.value && project.value.images.length > 1) {
    currentImageIndex.value = currentImageIndex.value === 0 
      ? project.value.images.length - 1 
      : currentImageIndex.value - 1
  }
}

onMounted(() => {
  // 自动轮播（可选）
  if (project.value && project.value.displayMode === 'carousel' && project.value.images.length > 1) {
    setInterval(() => {
      nextImage()
    }, 5000)
  }
})
</script>

<style scoped>
/* 添加一些特定的样式 */
.sticky {
  position: sticky;
}
</style>